<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui'

import { Button, Space } from 'ant-design-vue'

import { useVbenForm } from '#/adapter/form'

const emit = defineEmits(['refresh'])

const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: [
    { component: 'Input', fieldName: 'supplyUser.supply_name', label: '账号' },
    { component: 'Input', fieldName: 'printTemplate.name', label: '模板' },
    { component: 'Input', fieldName: 'printer_name', label: '打印机名称' },
    { component: 'Input', fieldName: 'total_copies', label: '份数' },
    { component: 'Textarea', componentProps: { rows: 5 }, fieldName: 'print_log', label: '份数' },
    { component: 'Input', fieldName: 'created_at', label: '创建时间' },
    { component: 'Input', fieldName: 'updated_at', label: '更新时间' },
  ],
  wrapperClass: 'grid-cols-1',
})

const [Modal, modalApi] = useVbenModal({
  destroyOnClose: true,
  class: 'w-[30%] h-[60%]',
  appendToMain: true,
  fullscreenButton: false,
  onCancel() {
    modalApi.close()
    emit('refresh')
  },
  onConfirm: async () => {
    await baseFormApi.validateAndSubmitForm()
  },
  onOpenChange: async (isOpen: boolean) => {
    if (isOpen) {
      const { rowData, view } = modalApi.getData<Record<string, any>>()
      await baseFormApi.setValues(rowData, false)
    }
  },
})
</script>

<template>
  <Modal title="日志详细">
    <BaseForm />
    <template #footer>
      <div class="flex justify-end">
        <Space>
          <Button @click="modalApi.close()">取消</Button>
        </Space>
      </div>
    </template>
  </Modal>
</template>

<style scoped></style>
